<template>
  <div class="a-invitefriend">
    <img :src="bgImg" alt="">
    <div class="a-invitefriend-btn" :style="{top: btnTop + 'px'}">
      <vbutton text="立即邀请好友" bgColor="#e61639" @click="toInviteFriend"></vbutton>
    </div>
  </div>
</template>

<script>
  import vbutton from 'components/common/button'

  export default {
    data () {
      return {
        bgWidth: 0,
        bgHeight: 0,
        bgImg: require('assets/bigbackground/bg_invistFirends.png')
      }
    },
    computed: {
      btnTop () {
        return 3900 * (this.bgHeight / 4100)
      }
    },
    methods: {
      toInviteFriend () {
        if (this.$route.query.type === 'android' || this.$route.query.type === 'ios') {
          window.location.href = 'nativejs://' + '{"viewNum":"5"}'
          return
        }
        this.$router.push('/inviteFriends')
      }
    },
    created () {
      this.bgWidth = document.documentElement.clientWidth
      this.bgHeight = (2800 / 750) * this.bgWidth
    },
    components: {
      vbutton
    }
  }

</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .a-invitefriend {
    position: relative;
    width: 100%;
    font-size: 30px;
    &>img {
      width: 100%;
      position: absolute;
      z-index: $zIndex-1--activityBG;
    }
    &-btn {
      width: 100%;
      position: absolute;
      text-align: center;
      z-index: $zIndex-2--activityOverBG;
    }
  }
</style>
